<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue组合式API模板</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- Vue模板内容区域 -->
      <h1>{{ title }}</h1>
      <p>{{ message }}</p>
      <button @click="updateMessage">更新消息</button>
    </div>

    <script>
      const { createApp, ref, reactive, computed, onMounted } = Vue

      const App = {
        setup() {
          // 响应式数据
          const title = ref('Vue组合式API')
          const message = ref('这是一个Vue应用示例')

          // 响应式对象
          const state = reactive({
            count: 0
          })

          // 计算属性
          const computedValue = computed(() => {
            return `计算值: ${state.count}`
          })

          // 方法
          const updateMessage = () => {
            message.value = '消息已更新！'
            state.count++
          }

          // 生命周期
          onMounted(() => {
            console.log('组件已挂载')
          })

          // 返回模板需要的数据和方法
          return {
            title,
            message,
            state,
            computedValue,
            updateMessage
          }
        }
      }

      createApp(App).mount('#app')
    </script>
  </body>
</html>
